<template>
    <el-row class="height100 box box-tb box-pack-start top">
        <div class="select box box-align-center box-pack-start mb10">
            <span class="mr10">学期</span>
            <el-select v-model="xqValue" placeholder="选择学期" @change="changeXq" class="text">
                <el-option v-for="(item,index) in xqList" :key="index" :label="item.xn +`-`+item.xq"
                    :value="item.xn +`-`+item.xq"></el-option>
            </el-select>
        </div>
        <el-col class="pub box box-pack-between" style="height: calc(100% - 50px);">
            <el-col class="pub padd10" :span="8" style="overflow-y: auto;">
                <el-col class="box box-align-center box-pack-between">
                    <div>
                        <i class="icon-1"></i>
                        实践清单 {{sjList.length}}项
                    </div>
                </el-col>
                <el-col class="mt30" style="width: 97%;">

                    <el-col :span="24" v-if="sjList.length !=0">
                        <div class="lists cp padd20 box box-tb box-pack-between box-align-start mb10"
                            :class="{active:item.sjlistid == sjid}" v-for="(item,index) in sjList" :key="index"
                            @click="change(item)">
                            <span class="icon-2" v-if="item.type==`0`">服务劳动</span>
                            <span class="icon-2" v-if="item.type==`1`">日常生产劳动</span>
                            <span class="icon-2" v-if="item.type==`2`">生活劳动</span>
                            <div class="box box-align-center" style="width: 100%;box-sizing: border-box;">
                                <el-image class="img" style="width: 80px;height: 60px;min-width: 80px;" fit="cover"
                                    :src="item.img">
                                </el-image>
                                <div class="ml20 box box-tb box-align-start" style="width: 100%;">
                                    <h3 class="mb10 tl">{{item.title}}</h3>
                                    <span>视频：{{item.videocnt}}</span>
                                </div>
                            </div>
                            <el-col class="box box-tb box-align-start mt20">
                                <span>完成总进度({{item.finishedcnt +'/'+item.totalcnt }})</span>
                                <el-progress
                                    :percentage="item.totalcnt !=0?parseInt(item.finishedcnt/item.totalcnt*100):0">
                                </el-progress>
                            </el-col>

                        </div>
                    </el-col>
                    <el-col v-else>
                        暂无数据
                    </el-col>

                </el-col>
            </el-col>
            <el-col :span="16" class="no-auto box box-tb" style="overflow-y: auto;position: relative;">
                <el-col class="tr mt20">
                    <el-select v-model="classValue" placeholder="选择班级" @change="stuLdsjRate" class="text"
                        style="width: 160px;">
                        <el-option v-for="(item,index) in bjList" :key="index" :label="item.bjmc" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col class="stu-list">
                    <el-col>
                        <el-col :span="9">姓名</el-col>
                        <el-col :span="5">得分</el-col>
                        <el-col :span="5">是否完成</el-col>
                        <el-col :span="5">完成时间</el-col>
                    </el-col>
                    <el-col v-if="stuList.length !=0">
                        <el-col class="padd20" v-for="(item,index) in stuList" :key="index">
                            <el-col :span="9" class="box box-align-center">
                                <el-avatar :size="50" :src="item.icon">
                                </el-avatar>
                                <div class="ml10 box box-tb">
                                    <h3 class="tl">{{item.name}}</h3>
                                    <span>{{item.bjmc}}</span>
                                </div>
                            </el-col>
                            <el-col :span="5">{{item.score!=null?item.score:0}}</el-col>
                            <el-col :span="5">
                                <i class="el-icon-check" v-if="item.isfinshed == 1"></i>
                                <span v-else>- -</span>
                            </el-col>
                            <el-col :span="5">{{ item.createTime|dateFormat}}</el-col>
                        </el-col>
                    </el-col>
                    <el-col class="no-data box box-pack-center box-align-center" v-else>
                        暂无数据
                    </el-col>

                </el-col>
            </el-col>

        </el-col>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                loginInfo: this.$store.state.loginInfo,
                bjList: [],
                bj: 0,
                ldsjid: 0,
                sjList: [],
                tkzt: false,
                current: 0,
                xqList: [],
                qdList: [],
                xqValue: '',
                classValue: '',
                checkedSjs: [],
                isIndeterminate: true,
                schoolid: this.$store.state.schoolId,
                sjid: 0,
                stuList: []
            };
        },
        mounted() {
            this.getXqData()
        },
        filters: {
            dateFormat: function(dataStr) {
                var time = new Date(dataStr)

                function timeAdd0(str) {
                    if (str < 10) {
                        str = '0' + str
                    }
                    return str
                }
                var y = time.getFullYear()
                var m = time.getMonth() + 1
                var d = time.getDate()
                var h = time.getHours()
                var mm = time.getMinutes()
                var s = time.getSeconds()
                return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' +
                    timeAdd0(s)
            }
        },
        methods: {
            //查询班级列表
            changeXq() {
                this.ldsjData()
            },

            trClassListLabel() {
                let url = '/yteachplan/trcs';
                let params = {
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    trid: this.loginInfo.user.id,
                    // trid: 24358,
                    schoolid: this.loginInfo.user.schoolId
                };
                this.$ajax.post(url, params).then(res => {
                    // console.log(res);
                    if (res.code == 0) {
                        this.bjList = res.list;
                        if (res.list.length != 0) {
                            this.classValue = res.list[0].id;
                            this.stuLdsjRate()
                        }
                    } else {
                        this.$message.error(res);
                    }
                })
            },
            getXqData() {
                let url = "/comm/getXnxqList";
                let params = {
                    schoolid: this.schoolid
                };
                this.$ajax.post(url, params).then(res => {
                    // console.log(res);
                    if (res.code == 0) {
                        this.xqList = res.xnxqList;
                        let a = res.xnxqList.map(resp => {
                            if (resp.isCur == 1) return resp
                        })
                        a.forEach(r => {
                            if (r != undefined) {
                                this.xqValue = r.xn + '-' + r.xq
                            }
                        })
                        // this.xqValue = a[0].xn +'-'+a[0].xq
                        this.ldsjData();
                        this.trClassListLabel()
                    }
                })
            },
            stuLdsjRate() {
                let url = '/ysjrecords/process';
                let params = {
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    sjlistid: this.sjid,
                    classid: this.classValue,
                    userid: this.loginInfo.user.id
                };
                console.log(params);
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.stuList = res.list;
                        // this.ldsjData()
                    } else {
                        // this.$message.error('请求失败！');
                    }
                })
            },
            ldsjData() {
                let url = '/ysjrecords/sjlist';
                let params = {
                    xn: this.xqValue.split('-')[0],
                    xq: this.xqValue.split('-')[1].split('（')[0],
                    // userid: 7,
                    userid: this.loginInfo.user.id
                };
                // console.log(params);
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.sjList = res.list;
                        this.stuCnt = res.classStuCnt
                        if(res.list.length !=0){
                             this.sjid = res.list[0].sjlistid
                        }

                        this.stuLdsjRate()
                    } else {
                        // this.$message.error('请求失败！');
                    }
                })
            },
            change(item) {
                this.sjid = item.sjlistid
                // console.log(this.sjid);
                this.stuLdsjRate()
            }
        }
    }
</script>

<style scoped lang="scss">
    .top {
        padding: 20px;
        background-color: #fff;
    }

    .no-data {
        height: calc(100% - 20px);
    }

    .stu-list {
        padding-top: 20px;
        box-sizing: border-box;
        height: 100%;
    }

    .pub::-webkit-scrollbar {
        width: 0px;
    }

    .no-auto::-webkit-scrollbar {
        width: 0px;
    }

    .class {
        width: 200px;
        background-color: #fff;
    }

    .class-top {
        padding: 10px 20px;
        border-bottom: 1px solid #EEF4F8;
    }

    .class-list {
        overflow-y: auto;
    }

    .list {
        position: relative;
        padding: 20px;
        height: 113px;
        background: #fff;
        border: 1px solid #E0DEF6;
        border-radius: 7px;

        .icon {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 114px;
            height: 22px;
            background: #FFF5D9;
            color: #FFA758;
            font-size: 15px;
            border-radius: 7px 0px 0px 0px;
        }

        h3 {
            font-size: 18px;
        }
    }

    .lists {
        box-sizing: border-box;
        position: relative;
        background: #F8F9FF;
        border: 1px solid #ccc;
        border-radius: 6px;
        // overflow: hidden;


        h3 {
            width: 65%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .icon-2 {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 114px;
            height: 22px;
            background: #FFF5D9;
            color: #FFA758;
            font-size: 15px;
            border-radius: 7px 7px 0px 0px;
        }

        &.active::after {
            //正常带父盒子边框颜色的三角形
            position: absolute;
            top: 73px;
            right: -20px;
            border: solid transparent;
            content: ' ';
            height: 0;
            width: 0;
            border-width: 10px;
            //尖朝上，bottom。以此类推
            border-left-color: #6485FF;
        }

    }

    .lists.active {
        border: 1px solid #6485FF;
    }

    .lists:after {}

    .pub {
        border: 1px solid #E0DEF6;
        // border-radius: 12px;
    }


    .maxwidth {
        max-width: 1400px;
        margin: 20px auto !important;
    }

    /deep/ .el-image.img {
        border-radius: 5px;
        width: 120px;
        height: 100px;
    }

    .el-icon-check {
        display: block;
        font-size: 30px;
        color: #626BF1;
    }

    /deep/ .el-progress {
        width: 100%;
    }

    /deep/ .el-progress-bar__inner {
        background: linear-gradient(-90deg, #626BF1, #C4A0FF);
        background-color: none;
    }
</style>
